<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/templates/plantilla1.xhtml"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="contenido">

        <h:form id="formUsuario">

            <h:panelGroup rendered="#{!gestionarUsuariosBean.modoEditar}">
                <h3>Crear Usuario</h3>
            </h:panelGroup>
            <h:panelGroup rendered="#{gestionarUsuariosBean.modoEditar}">
                <h3>Editar Usuario</h3>
            </h:panelGroup>

            <table>
                <tr>
                    <th>
                        <h:outputText value="* " rendered="#{!gestionarUsuariosBean.modoEditar}" />
                        Rut
                    </th>
                    <td>
                        <h:outputText value="#{gestionarUsuariosBean.usuario.rut}" rendered="#{gestionarUsuariosBean.modoEditar}">
                            <f:converter converterId="rutConverter" />
                        </h:outputText>
                        <p:inputText id="rut" value="#{gestionarUsuariosBean.usuario.rut}" styleClass="validaRut"
                                     required="true" converter="rutConverter" rendered="#{!gestionarUsuariosBean.modoEditar}" />
                    </td>
                    <td>
                        <p:message for="rut" />
                    </td>
                </tr>
                <tr>
                    <th>* Nombres:</th>
                    <td>
                        <p:inputText id="nombre" value="#{gestionarUsuariosBean.usuario.nombres}"
                                     required="true" />
                    </td>
                    <td>
                        <p:message for="nombre" />
                    </td>
                </tr>
                <tr>
                    <th>* Apellidos:</th>
                    <td>
                        <p:inputText id="apellidos" value="#{gestionarUsuariosBean.usuario.apellidos}"
                                     required="true" />
                    </td>
                    <td>
                        <p:message for="apellidos" />
                    </td>
                </tr>
                <tr>
                    <th>* Perfil:</th>
                    <td>
                        <p:selectOneMenu id="perfil" 
                                         value="#{gestionarUsuariosBean.usuario.perfil}"
                                         required="true"
                                         converter="jsonConverter">
                            <f:selectItem itemLabel=" " />
                            <f:selectItems value="#{gestionarUsuariosBean.perfilList}" 
                                           var="p" itemLabel="#{p.nombre}" itemValue="#{p}" />
                        </p:selectOneMenu>
                    </td>
                    <td><p:message for="perfil" /></td>
                </tr>
                <tr>
                    <th>Fecha Nacimiento:</th>
                    <td>
                        <p:calendar id="fecha" value="#{gestionarUsuariosBean.usuario.fechaNacimiento}" readonlyInput="true"
                                    locale="es" navigator="true" pattern="dd/MM/yyyy" yearRange="-100:+0" showOn="button" />
                    </td>
                    <td>
                        <p:message for="fecha" />
                    </td>
                </tr>
                <tr>
                    <th>Email:</th>
                    <td>
                        <p:inputText id="email" value="#{gestionarUsuariosBean.usuario.email}" />
                    </td>
                    <td>
                        <p:message for="email" />
                    </td>
                </tr>
            </table>
            <h:panelGroup rendered="#{gestionarUsuariosBean.modoEditar}">
                <p>Si desea cambiar las contraseñas ingreselas</p>
            </h:panelGroup>
            <table>
                <tr>
                    <th>
                        <h:outputText value="* " rendered="#{!gestionarUsuariosBean.modoEditar}" />
                        Contraseña:
                    </th>
                    <td>
                        <p:password id="password" value="#{gestionarUsuariosBean.password}" 
                                     required="#{!gestionarUsuariosBean.modoEditar}" />
                    </td>
                    <td>
                        <p:message for="password" />
                    </td>
                </tr>
                <tr>
                    <th>
                        <h:outputText value="* " rendered="#{!gestionarUsuariosBean.modoEditar}" />
                        Confirmar contraseña:
                    </th>
                    <td>
                        <p:password id="confirmarPassword" value="#{gestionarUsuariosBean.passwordConfirmacion}"
                                     required="#{!gestionarUsuariosBean.modoEditar}" />
                    </td>
                    <td>
                        <p:message for="confirmarPassword" />
                    </td>
                </tr>
            </table>

            <div class="botonera">
                <p:commandButton value="Guardar"  type="button" onclick="confirmGuardar.show();" />
                <p:commandButton value="Volver" action="volver" immediate="true" ajax="false" />
            </div>

            <p:confirmDialog widgetVar="confirmGuardar" header="Guardar Usuario"  message="¿Esta seguro que desea guardar usuario?"  >  
                <p:commandButton value="Si" ajax="false" action="#{gestionarUsuariosBean.guardar()}" 
                                 styleClass="ui-confirmdialog-yes" icon="ui-icon-check" oncomplete="confirmGuardar.hide();"/>  
                <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" 
                                 onclick="confirmGuardar.hide();" />       
            </p:confirmDialog>  

        </h:form>

    </ui:define>
</ui:composition>
